{extend name="public/base" /}

{block name="content"}
<style>
  .pagination{
      margin-top: 0;
      margin-bottom: 0;
  }
  table tr th{text-align: center;}
  table tr td{text-align: center;}
  /*.item-checkbox-wrapper{width:80px;}
  .create-time{width:100px;text-align: center;}
  .backup-status{width:200px;}*/
</style>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="pull-left">
                        <button data-style="zoom-in" class="ladda-button btn btn-sm btn-primary backup">备份</button>
                        <button type="button" data-type="optimize" data-style="zoom-in" class="ladda-button btn btn-sm btn-info all-checkbox">优化表</button>
                        <button type="button" data-type="repair" class="ladda-button btn btn-sm btn-warning all-checkbox" data-style="zoom-in">修复表</button>
                    </div>
                    <table class="table table-bordered table-hover" width="100%">
                      <thead>
                        <tr >
                            <th width="8%">
                                <input type="checkbox" checked class="i-checks total-checkbox"> 全选
                            </th>
                            <th width="20%">表名</th>
                            <th>记录数</th>
                            <th>数据大小</th>
                            <th>创建时间</th>
                            <th width="30%">进度</th>
                            <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        {empty name='list'}
                        <tr align="center">
                            <td colspan="6">
                                暂时没有数据哦
                            </td>
                        </tr>
                        {else /}
                        {foreach $list as $item}
                        <tr>
                          <td class="item-checkbox-wrapper">
                            <input checked name="tables[]" value="{$item.name}" type="checkbox" class="i-checks item-checkbox">
                          </td>
                          <td class="table-name" align="center">{$item.name}</td>
                          <td>{$item.rows}</td>
                          <td>{$item.data_length|calc}</td>
                          <td class="create-time">{$item.create_time}</td>
                          <td class="backup-status">
                            <div class="progress progress-striped active">
                              <div class="progress-bar progress-bar-success backup-bar" role="progressbar"
                                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 0;">
                                 <span class="bar-text">0%</span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <button data-type="optimize" type="button" title="优化表" class="btn btn-outline btn-info btn-xs operate">
                              <i class="fa fa-refresh"></i>
                            </button>
                            <button data-type="repair" type="button" title="修复表" class="btn btn-outline btn-warning btn-xs operate">
                              <i class="fa fa-wrench"></i>
                            </button>
                          </td>
                        </tr>
                        {/foreach}
                        {/empty}
                      </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
$(function(){
  var tables,l;
  $('.backup').click(function(){
    // 初始化进度条
    for (var i = 0; i < $('.backup-status').length; i++) {
      $('.backup-status').eq(i).find('.backup-bar').css('width',0+'%').find('.bar-text').html(0+'%').css('color','#000');
    }

    l = Ladda.create(this);
    l.start();   
    toastr.options = {
      debug: false,
      closeButton: true,
      progressBar: false,
      positionClass: 'toast-top-center',
      showMethod: 'slideDown',
      timeOut: false
    };
    toastr.info('开始初始化备份文件');
    $.post('/admin/export',$('.item-checkbox').serialize(),function(res){
      if (res.code==1) {
        setTimeout( () => {
          $('.toast-message').text(res.msg);
        }, 800);
        tables = res.tables;
        setTimeout( () => {
          $('.toast-message').text('正在备份，请不要关闭页面');
          backupData(res.data,false,0,l);
        }, 1300);
      }else{
        $('#toast-container .toast').removeClass('toast-info').addClass('toast-warning');
        $('.toast-message').text(res.msg);        
        setTimeout( ()=> {
          $('.toast-close-button').click()
        },1500 );
        l.stop();
      }
      // $('.toast-close-button').click()
      
    },'json')
  });
  function backupData(tab,status=false,rate=0,obj){
    status && showBar(tab.index, 0);
    $.get('/admin/export', tab, function(data){
      if(data.code<=3 && data.code!=0){
        showBar(tab.index, data.rate);
        if(!$.isPlainObject(data.data)){
          $('#toast-container .toast').removeClass('toast-info').addClass('toast-success');
          $('.toast-message').text('备份完成');      
          setTimeout( ()=> {
            $('.toast-close-button').click()
          },1500 );
          obj.stop();
          return;
        }
        backupData(data.data, tab.index != data.data.index,data.rate,obj);
      } else {
        $('#toast-container .toast').removeClass('toast-info').addClass('toast-error');
        $('.toast-message').text(data.msg);        
        setTimeout( ()=> {
          $('.toast-close-button').click()
        },1500 );
        obj.stop();
      }
    }, "json");
  }
  function showBar(index,rate){
    $('input[value="'+tables[index]+'"]').parent().parent().siblings('.backup-status').find('.backup-bar').css('width',rate+'%').find('.bar-text').html(rate+'%').css('color','#fff');
  }
}) 

$(document).ready(function () {
  $('.bar-text').css('color','#000');


  var flag = true;
  $('.operate').click(function(){
    let tableName = $(this).parent().siblings('.table-name').text();
    let type = $(this).data('type');
    if (flag) {
      flag = false;
      $.get('/admin/optimize',{
        tableName: tableName,
        type: type
      },function(res){
        if (res.code==1) {
          alertMsg(res.msg,'success',false);
        }else{
          alertMsg(res.msg,'error',false);
        }
        flag = true;
      },'json');
    }
  });
  $('.all-checkbox').click(function(){
    var l = Ladda.create(this);
    l.start();
    let tableName = [];
    for (let i = 0; i < $('tbody .icheckbox_square-green').length; i++) {
      if ($('tbody .icheckbox_square-green').eq(i).hasClass('checked')) {
        tableName.push($('tbody .icheckbox_square-green').eq(i).parent().siblings('.table-name').text());
      }
    }
    let type = $(this).data('type');
    let textInfo = type == 'repair' ? '修复' : '优化';
    if (tableName.length == 0) {
      alertMsg(`请选择要${textInfo}的数据表`,'error',false);
      l.stop();
      return;
    }
    tableName = tableName.join(',');
    $.get('/admin/optimize',{
      tableName: tableName,
      type: type
    },function(res){
      if (res.code==1) {
        alertMsg(res.msg,'success',false);
      }else{
        alertMsg(res.msg,'error',false);
      }
      l.stop();
    },'json');
  });
});
</script>
{/block}